<template>
  <div class='chartNav'>
    <div class='leftContent' ref='circle'>
    </div>
  </div>
  </template>
<script>
import * as echarts from 'echarts/core'
import { TooltipComponent, TitleComponent, GridComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
// import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, ref, watch, computed, nextTick, reactive } from 'vue'
import { getExpressVehicleInfos } from '@/api/express'

echarts.use([
  TooltipComponent,
  PieChart,
  CanvasRenderer,
  // LabelLayout,
  TitleComponent,
  GridComponent,
  LegendComponent
])
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    chartData: {
      type: Array,
      default: () => {
        return [
          {
            name: '正常',
            value: 100
          }, {
            name: '报警',
            value: 500
          }, {
            name: '离线',
            value: 300
          }, {
            name: '故障',
            value: 100
          }
        ]
      }
    }
  },
  setup(props, context) {
    const rem = ref(80)
    const circle = ref()
    const myChart = ref(null)
    const state = reactive({
      data: []
    })
    onMounted(() => {
      window.addEventListener('resize', setReSize)
      const docEl = document.documentElement
      rem.value = docEl.clientWidth / 24
      getExpressVehicleInfos().then(res => {
        if (res?.success) {
          const { vehicleCount = [] } = res.result || {}
          state.data = JSON.parse(JSON.stringify(handleData3(vehicleCount)))
          console.log(state.data, 'vehicleCountvehicleCountvehicleCountvehicleCount')
          chartInit()
        }
      })
    })
    watch(
      () => props.item,
      (count, prevCount) => {
        chartUpdate()
      },
      { deep: true }

    )
    const options = computed(() => {
      const scale = 1
      const rich = {
        yellow: {
          color: '#ffc72b',
          fontSize: 40 * scale,
          padding: [5, 4],
          align: ' '
        },
        total: {
          color: '#ffc72b',
          fontSize: 40 * scale,
          align: 'center'
        },
        white: {
          color: '#fff',
          align: 'center',
          fontSize: 40 * scale,
          padding: [21, 0]
        },
        blue: {
          color: '#49dff0',
          fontSize: 40 * scale,
          align: 'center',
          padding: [0, 10]
        },
        hr: {
          borderColor: '#0b5263',
          width: '100%',
          borderWidth: 1,
          height: 0
        }
      }
      return {
        // backgroundColor: '#031f2d',
        title: {
          show: false,
          text: '设备状态',
          left: 'center',
          top: '53%',
          padding: [24, 0],
          textStyle: {
            color: '#fff',
            fontSize: 18 * scale,
            align: 'center'
          }
        },
        legend: {
          show: false,
          selectedMode: false,
          formatter: function(name) {
            var total = 0 // 各科正确率总和
            var averagePercent // 综合正确率
            state.data.forEach(function(value, index, array) {
              total += Number(value.value)
              console.log(averagePercent)
            })
            return '{total|' + total + '}'
          },
          data: [state.data[0].name],
          itemGap: 50,
          left: 'center',
          top: 'center',
          icon: 'none',
          align: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16 * scale,
            rich: rich
          }
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['40%', '60%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          color: ['#0066FF', '#313ADC', '#425DB0', '#15C5BC', '#6f81da', '#0395D4', '#0395D4', '#0395D4'],
          label: {
            normal: {
              formatter: function(params, ticket, callback) {
                var total = 0 // 考生总数量
                var percent = 0 // 考生占比
                state.data.forEach(function(value, index, array) {
                  total += Number(value.value)
                })
                percent = ((params.value / total) * 100).toFixed(1)
                return '{white|' + params.name + '}\n{hr|}\n{yellow|' + percent + '%}{blue|' + params.value + '辆}'
              },
              rich: rich
            }
          },
          labelLine: {
            normal: {
              length: 200 * scale,
              length2: 0,
              lineStyle: {
                color: '#0b5263',
                width: 5
              }
            }
          },
          data: state.data,
          itemStyle: {
            borderWidth: 5, // 扇区间隔大小
            borderColor: '#1a3263' // 和背景色保持一致,
          }
        }]
      }
    })
    const handleData3 = (data) => {
      // const total = data.reduce((pre, cur) => {
      //   return pre.ycoordinate + cur.ycoordinate
      // })
      data.forEach(item => {
        item.value = item.ycoordinate
        item.name = item.xcoordinate
        // item.rate = (item.ycoordinate / total) * 100
      })
      return data
    }
    const chartInit = () => {
      var chartDom = circle.value
      chartDom.removeAttribute('_echarts_instance_')
      myChart.value = echarts.init(chartDom)
      options.value && myChart.value.setOption(options.value)
    }
    const chartUpdate = () => {
      myChart.value.setOption(options.value)
    }
    const setReSize = () => {
      nextTick(() => {
        chartInit()
      })
    }
    return {
      circle,
      chartInit,
      options,
      myChart,
      chartUpdate,
      rem,
      setReSize,
      state
    }
  }
}
</script>
  <style lang="less" scoped>
    .chartNav{
      width:  1680px;
      height: 662px;
      display: flex;
      justify-content: flex-start;
      // background: red;
      position: relative;
    }
      .leftContent{
        position: absolute;
        z-index: 5;
        float: left;
        // display: inline-block;
        background: transparent;
        width: 100%;
        height: 100%;
        // background: red;
        canvas{
          cursor: pointer !important;
        }
      }
      .leftContent2{
        z-index: 1;
        float: left;
        // display: inline-block;
        width: 100%;
        height: 100%;
        canvas{
          cursor: pointer !important;
        }
      }
  </style>
